<div class="tab-wrap">
    <#if isUnlocked == false>
	    <div class="lock-tips">
		    <div class="title">
			    Below is a sample report. This feature only available to <em>ADVANCED</em> version or higher.
			    <br>
			    Please use credit to unlock the report or upgrade your membership.
		    </div>
		    <div class="right">
			    <button class="gd-btn btn-default">Unlock</button>
			    <button class="gd-btn btn-info">Upgrade</button>
		    </div>
	    </div>
        <#if isMobile == false>
		    <img class="demo-img" src="${request.contextPath}/static/img/ins/Audience-Web.png" alt="sample report">
        <#else>
		    <img class="demo-img" src="${request.contextPath}/static/img/ins/Audience-Mobile.png"
		         srcset="${request.contextPath}/static/img/ins/Audience-Mobile@2x.png 2x" alt="sample report">
        </#if>
    <#else>
	    <div class="wrap-item">
		    <div class="wrap-item__title" style="margin-top: 0">
			    Audience Quality Analytics
                <#if isMobile == true>
				    <div class="gd-popover"
				         data-title="Tips"
				         content="<dl class='modal-tip'>
									<dt>1.Quality Audience</dt>
									<dd>The estimated quality audience size, excluding suspecious accounts.</dd>
									<dt>2.Quality Audience Ratio</dt>
									<dd>The estimated quality audience rate, excluding suspecious accounts.</dd>
								</dl>">
					    <i class="iconfont iconfaq"></i>
				    </div>
                </#if>
		    </div>
		    <div class="quality-wrap">
			    <div class="quality-list" id="qualityList">
				    <div class="quality-item" style="display: none;">
					    <div class="title">
						    Quality Audience
                            <#if isMobile == false>
							    <div class="gd-popover"
							         content="The estimated quality audience size, excluding suspecious accounts.">
								    <i class="iconfont iconfaq"></i>
							    </div>
                            </#if>
					    </div>
					    <div class="sub-title">
						    -
					    </div>
				    </div>
				    <div class="quality-item" style="display: none;">
					    <div class="title">
						    Quality Audience Ratio
                            <#if isMobile == false>
							    <div class="gd-popover"
							         content="The estimated quality audience rate, excluding suspecious accounts.">
								    <i class="iconfont iconfaq"></i>
							    </div>
                            </#if>
					    </div>
					    <div class="sub-title">
						    -
					    </div>
				    </div>
				    <div class="quality-item">
					    <div class="title">Major Country</div>
					    <div class="sub-title">
						    -
					    </div>
				    </div>
				    <div class="quality-item">
					    <div class="title">Gender</div>
					    <div class="sub-title">
						    -
					    </div>
				    </div>
				    <div class="quality-item">
					    <div class="title">Age Range</div>
					    <div class="sub-title">
						    -
					    </div>
				    </div>
				    <div class="quality-item">
					    <div class="title">Active Day</div>
					    <div class="sub-title">
						    -
					    </div>
				    </div>
				    <div class="quality-item">
					    <div class="title">Active Hour</div>
					    <div class="sub-title">
						    -
					    </div>
				    </div>
			    </div>
			    <div class="quality-ana" id="qualityAna" style="display: none">
				    <div class="title">
					    Quality Audience
					    <div class="account-state excellent" id="qualityAnaLabel">Excellent</div>
				    </div>
				    <div class="sub-title">
					    Estimated quality audience rate is <span>-%</span>, surpassing <span>-%</span> similar accounts of <span>-%</span> on average.
				    </div>
			    </div>
		    </div>
	    </div>
	    <div class="wrap-item">
		    <div class="flex-list">
			    <div class="flex-item" style="display: none">
				    <div class="wrap-item__title">Audience Account Type</div>
				    <div class="accountType-wrap">
					    <div class="chart-con" style="height: 264px;" id="audienceAccountType"></div>
					    <div class="accountType-list">
						    <div class="accountType-item">
							    <div class="cube"></div>
							    <div class="title">Quality Followers</div>
							    <div class="num"></div>
						    </div>
						    <div class="accountType-item">
							    <div class="cube"></div>
							    <div class="title">Massive Following</div>
							    <div class="num"></div>
						    </div>
						    <div class="accountType-item">
							    <div class="cube"></div>
							    <div class="title">Suspicious Account</div>
							    <div class="num"></div>
						    </div>
					    </div>
				    </div>
			    </div>
			    <div class="flex-item" style="margin-left: 0">
				    <div class="wrap-item__title">
					    Age/Gender Split
					    <div class="gd-popover"
                                <#if isMobile == true>
								    data-title="Age/Gender Split: Adult"
                                </#if>
							 content="Adults are defined as 21 years old or older.">
						    <i class="iconfont iconfaq"></i>
					    </div>
				    </div>
				    <div class="split-wrap" id="ageGenderSplitWrap">
					    <div class="title" id="ageGenderSplitTitle">
						    <span>Male</span>: -%  <span>Female</span>: -   <span>Adult</span>: -%  <span>20-25</span>: -%
					    </div>
					    <div class="split-con" id="ageGenderSplitTrend"></div>
				    </div>
			    </div>
		    </div>
	    </div>
	    <div class="wrap-item">
		    <div class="flex-list">
			    <div class="flex-item">
				    <div class="wrap-item__title">
					    Location Distribution
                        <#--<div class="title__right">
							<ul>
								<li class="is-active">Country</li>
								<li>City</li>
							</ul>
						</div>-->
				    </div>
				    <div class="location-wrap" id="locationWrap"></div>
			    </div>
			    <div class="flex-item" id="languageSplit">
				    <div class="wrap-item__title">Language Split</div>
				    <div class="interest-wrap language-split-list" id="languageSplitList"></div>
				    <div class="language-split" id="languageCircleList"></div>
			    </div>
		    </div>
	    </div>
	    <div class="wrap-item">
		    <div class="flex-list">
			    <div class="flex-item">
				    <div class="wrap-item__title">Ethnicity</div>
				    <div class="ethnicity-wrap" id="ethnicityChart"></div>
			    </div>
			    <div class="flex-item">
				    <div class="wrap-item__title">Annual Income Estimation(US Dollar)</div>
				    <div class="income-wrap" id="incomeChart"></div>
			    </div>
		    </div>
	    </div>
	    <div class="wrap-item">
		    <div class="flex-list">
			    <div class="flex-item trend-wrap" id="activeHourWrap">
				    <div class="wrap-item__title" style="margin-bottom: 0">
					    Active Time Period (UTC)
				    </div>
				    <div class="sub-title">
					    The best time to post is <b>-</b> since the followers are more active at the time.
				    </div>
				    <div class="trend-wrap__inner">
					    <div class="trend-con" style="height: 240px;" id="activeTimeHourChart"></div>
				    </div>
			    </div>
			    <div class="flex-item trend-wrap" id="activeDayWrap">
				    <div class="wrap-item__title" style="margin-bottom: 0">
					    Active Time Period (UTC)
				    </div>
				    <div class="sub-title">
					    The best day to post is <b>-</b> since the followers are more active.
				    </div>
				    <div class="trend-wrap__inner">
					    <div class="trend-con" style="height: 240px;" id="activeTimeDayChart"></div>
				    </div>
			    </div>
		    </div>
	    </div>
	    <div class="wrap-item trend-wrap" id="interestWrap" style="display: none">
		    <div class="wrap-item__title" style="margin-bottom: 0">
			    Interest Distribution
			    <div class="gd-popover"
                        <#if isMobile == true>
						    data-title="Interest Distribution"
                        </#if>
					 content="A list of industries that the audience most engaged with (liked or commented) to better understand whether the influencer matches your industry.">
				    <i class="iconfont iconfaq"></i>
			    </div>
			    <div class="title__right">
				    <ul>
					    <li class="is-active" onclick="changeInterestDis(this,0)">All</li>
					    <li onclick="changeInterestDis(this,1)">Business Account</li>
				    </ul>
			    </div>
		    </div>
		    <div class="sub-title">
			    The audience is more interested in <b>-</b>. This type of ads might be more effective.
		    </div>
		    <div class="trend-wrap__inner" id="interestDisWrapInner">
			    <div class="trend-con" style="height: 255px;" id="interestDisChart"></div>
			    <div class="location-wrap" style="padding: 0" id="interestDisList"></div>
		    </div>
	    </div>
	    <div class="wrap-item" style="display: none">
		    <div class="wrap-item__title">
			    Top Interested Business Accounts
			    <div class="gd-popover"
                        <#if isMobile == true>
						    data-title="Top Interested Business Accounts"
                        </#if>
					 content="A list of business accounts that the audience most engaged with (liked or commented) to better understand whether the influencer matches your industry.">
				    <i class="iconfont iconfaq"></i>
			    </div>
		    </div>
		    <div class="brand-wrap topBrand-wrap" id="likeBrandList">
			    <div class="brand-list">
                    <#--<div class="brand-item">
						<img class="brand-avatar" src="" alt="1">
						<div class="brand-info">
							<div class="title">Nike</div>
							<div class="sub-title">Cinema &amp; Actor...</div>
						</div>
					</div>-->
			    </div>
			    <div class="wrap-footer" onclick="getLikeBrand()">View More</div>
		    </div>
	    </div>
	</#if>
</div>
<script>
    let likeBrandPageSize = 1
	<#if login == true && isUnlocked == true>
    initAudience()
	</#if>
	function initAudience(){
	    getSplit()
		getFansGoal()
		getAudienceInterest()
		getLikeBrand()
	}
	function getFansGoal() {
        const dayName = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
	    _axios.get('/ins/blogger/fansGoal/${blogger.uid?c}').then(res => {
	        if(res.Code === 200) {
                // Audience Quality Analytics
				const list = document.querySelectorAll('#qualityList .quality-item .sub-title')
                list[0].innerText = res.Data.realFollower?numFormat(res.Data.realFollower): '-'
				list[1].innerText = (res.Data.realFollowerRate || '-') + '%'
		        list[2].innerText = (res.Data.nation || '-') + ' ' + (res.Data.nationRate || '-') + '%'
		        list[3].innerText = (res.Data.gender || '-') + ' ' + (res.Data.genderRate || '-') + '%'
		        list[4].innerText = (res.Data.age || '-') + ' ' + (res.Data.ageRate || '-') + '%'
		        const activeHour = (res.Data.activeHour || res.Data.activeHour === 0)? (res.Data.activeHour + ':00') : '-'
		        const activeDay = res.Data.activeDay? dayName[+res.Data.activeDay] : '-'
                list[5].innerText = activeDay
                list[6].innerText = activeHour

		        // Active Time Period (UTC)
		        const titleHour = document.querySelector('#activeHourWrap .sub-title b')
                titleHour.innerText = activeHour
                const titleDay = document.querySelector('#activeDayWrap .sub-title b')
                titleDay.innerText = activeDay

                // Age/Gender Split
		        const anaList = document.querySelectorAll('#qualityAna .sub-title span')
		        anaList[0].innerText = (res.Data.realFollowerRate?numFormat(+res.Data.realFollowerRate): '-') + '%'
		        anaList[1].innerText = (res.Data.exceed?numFormat(+res.Data.exceed): '-') + '%'
		        anaList[2].innerText = (res.Data.sameSizeGrowRate?numFormat(+res.Data.sameSizeGrowRate): '-') + '%'
	        }
	    })
	}
	let activeFansInfo = {}
	function getSplit(){
        // 活跃粉丝信息
	    _axios.get('/ins/blogger/activeFansInfo/${blogger.uid?c}').then(res => {
	        if(res.Code === 200) {
                activeFansInfo = res.Data
                initAgenGenderTrend()
                initAudienceLocation()
                initLanguageTrend()
                initEthnicity()
                initActiveHour()
                initActiveDay()
		        initAudienceAccountType()
		        initIncomeChart()
            }
	    })
	}

	function initAudienceAccountType() {
        const e = document.getElementById('audienceAccountType')
        if(activeFansInfo.realFollowerRate || activeFansInfo.massiveFollowingRate
	        || activeFansInfo.suspiciousRate) {
            const chart = echarts.init(e)
            let option = {
                color: ['#3AA0FF', '#FFBD5A', '#1FDBBE'],
	            <#if isMobile == false>
                legend: {
                    align: 'left',
	                right: '20',
                    left: 'right',
                    top: '42%',
                    orient: 'vertical',
                    selectedMode: false,
                    formatter: name => {
                        if(name === 'Quality Followers') {
	                        name += '     ' + numFormat(+activeFansInfo.realFollowerRate) + '%'
                        } else if(name === 'Massive Following') {
                            name += '     ' + numFormat(+activeFansInfo.massiveFollowingRate) + '%'
                        } else {
	                        name += '       ' +  numFormat(+activeFansInfo.suspiciousRate) + '%'
                        }
                        return name
                    }
                },
	            </#if>
	            tooltip: {
		            show: false
	            },
                series: [
                    {
                        name: 'age',
                        type: 'pie',
                        <#if isMobile == false>
                        radius: ['60%', '80%'],
	                    center: ['30%', '50%'],
                        <#else>
                        radius: ['50%', '70%'],
                        </#if>
                        label: {
                            show: false,
                            position: 'center'
                        },
                        data: [{
                            value: activeFansInfo.realFollowerRate,
	                        name: 'Quality Followers'
                        },{
                            value: activeFansInfo.massiveFollowingRate,
	                        name: 'Massive Following'
                        },{
                            value: activeFansInfo.suspiciousRate,
	                        name: 'Suspicious Account'
                        }]
                    }
                ]
            }
            chart.setOption(option)
	        const list = document.querySelectorAll('.accountType-item')
	        const arrayRate = [numFormat(+activeFansInfo.realFollowerRate), numFormat(+activeFansInfo.massiveFollowingRate),
	        numFormat(+activeFansInfo.suspiciousRate)]
            list.forEach((item, i) => {
                const numEle = item.querySelector('.num')
	            numEle.innerText = arrayRate[i] + '%'
            })
        } else {
            showNoDataImg(e)
        }
	}
    const incomeEle = document.getElementById('incomeChart')
    function initIncomeChart() {
        if(activeFansInfo.income && activeFansInfo.income.length > 0) {
            const chart = echarts.init(incomeEle)
            const option = {
                color: ['#1890FF'],
                xAxis: {
                    type: 'category',
                    data: activeFansInfo.income.map(item => item.income),
                    axisLabel: {
                        textStyle: {
                            color: '#8C8C8C'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#EEE'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter (params) {
                        return params[0].name + ': ' + numFormat(+params[0].value) + '%'
                    }
                },
                grid: {
                    top: 18,
                    left: 40,
                    right: 0,
                    bottom: 20,
                    borderWidth: 0
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter(val) {
                            return numFormat(val) + '%'
                        },
                        textStyle: {
                            color: '#8C8C8C'
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#EEE'
                        }
                    }
                },
                series: [{
                    data: activeFansInfo.income.map(item => item.incomeRate),
                    type: 'bar',
                    lineStyle: {
                        width: 1
                    },
                    areaStyle: {
                        normal: {
                            opacity: 0.3
                        }
                    },
                    barWidth: 40,
                    itemStyle: {
                        barBorderRadius: [4, 4, 0, 0],
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#1890FF'
                            }, {
                                offset: 1,
                                color: '#FFF'
                            }]),
                            lineStyle: {
                                color: '#1890FF' // 改变折线颜色
                            }
                        }
                    }
                }]
            }
            chart.setOption(option)
	    } else {
            showNoDataImg(incomeEle)
        }
	}
    const ageGenderSplitTrend = document.getElementById('ageGenderSplitTrend')
    function initAgenGenderTrend() {
		const wrap = document.getElementById('ageGenderSplitWrap')
		if(activeFansInfo.generation && activeFansInfo.generation.length > 0) {
            const ageGenderSplitChart = echarts.init(ageGenderSplitTrend)
            const title = document.getElementById('ageGenderSplitTitle')
            let titleWrap = '<span>Male</span>: ' + numFormat(+activeFansInfo.maleRate) + '% ' +
                '<span>Female</span>: ' + numFormat(+activeFansInfo.femaleRate) + '% ' +
                '<span>Adult</span>: ' + numFormat(+activeFansInfo.adult) + '% ' +
	            '<span>' + activeFansInfo.generationTop +
	            '</span>: ' + numFormat(+activeFansInfo.generationRateTop) + '%'
            title.innerHTML = titleWrap
            const option = {
                color: ['#3AA0FF', '#F56C6C'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: (params) => {
                        return params[0].name + '<br>Male : ' + numFormat(+params[0].value) + '%' +
	                        '<br>Female : ' + numFormat(+params[1].value) + '%'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: activeFansInfo.generation.map(item => item.generation),
                    axisLabel: {
                        textStyle: {
                            color: '#8C8C8C'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#8C8C8C'
                        }
                    }
                },
                grid: {
                    top: 30,
                    left: 40,
                    right: 10,
                    bottom: 20,
                    borderWidth: 0
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter(val) {
                            return val + '%'
                        },
                        textStyle: {
                            color: '#8C8C8C'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#D8D8D8'
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                series: [{
                    barWidth: 20,
                    data: activeFansInfo.generation.map(item => item.maleRate),
                    type: 'bar'
                },
                    {
                        barWidth: 20,
                        data: activeFansInfo.generation.map(item => item.femaleRate),
                        type: 'bar'
                    }
                ]
            }
            ageGenderSplitChart.setOption(option)
		} else{
			showNoDataImg(wrap)
		}
	}
	function initAudienceLocation() {
        const e = document.getElementById('locationWrap')
		if(activeFansInfo.nation && activeFansInfo.nation.length > 0) {
            let str = ''
            activeFansInfo.nation.forEach(item => {
                str += '<div class="region-item">' +
                    '<div class="label">' +
                    '<div class="left">' + item.nationName + '</div>' +
                    '<div class="right">' + item.nationRate + '%</div>' +
                    '</div>' +
                    '<div class="gd-progress">' +
                    '<div class="gd-progress-bar" style="width:' + item.nationRate + '%;"></div>' +
                    '</div>' +
                    '</div>'
            })
            e.innerHTML = str
		} else {
		    showNoDataImg(e)
		}

	}
	function initLanguageTrend() {
	    if(activeFansInfo.language && activeFansInfo.language.length > 0) {
            const languageSplitList = document.getElementById('languageSplitList')
            const languageCircleList = document.getElementById('languageCircleList')
            let inner = ''
            let circleInner = ''
            activeFansInfo.language.forEach((item, i) => {
                inner += '<div class="interest-item">'
                circleInner += '<div class="gd-progress-circle">' +
                    '<div class="gd-progress-circle__line gd-progress-circle__r">'
                if(item.languageRate > 50) {
                    circleInner += '<div class="gd-progress-circle__c gd-progress-circle__rm" style="transform: rotate(135deg);"></div>' +
                        '</div>' +
                        '<div class="gd-progress-circle__line gd-progress-circle__l">' +
                        '<div class="gd-progress-circle__c gd-progress-circle__lm" style="transform: rotate(' + ((+item.languageRate-50)/100*135) + 'deg);"></div>'
                } else {
                    circleInner += '<div class="gd-progress-circle__c gd-progress-circle__rm" style="transform: rotate(' + (+item.languageRate/100*135) + 'deg);"></div>' +
                        '</div>' +
                        '<div class="gd-progress-circle__line gd-progress-circle__l">' +
                        '<div class="gd-progress-circle__c gd-progress-circle__lm"></div>'
                }
                circleInner += '</div>' +
                    '<div class="gd-progress-circle__num">' + item.languageRate + '%</div>' +
                    '<div class="gd-progress-circle__tx">' + item.languageName + '</div>' +
                    '</div>'
                switch (i) {
                    case 0:
                        inner += '<div class="circle blue"></div>'
                        break
                    case 1:
                        inner += '<div class="circle red"></div>'
                        break
                    case 2:
                        inner += '<div class="circle yellow"></div>'
                        break
                    case 3:
                        inner += '<div class="circle purple"></div>'
                        break
                    case 4:
                        inner += '<div class="circle blue-green"></div>'
                        break
                }
                inner += '<div class="label">' + item.languageName + '</div>' +
                    '<div class="num">' + item.languageRate + '%</div>' +
                    '</div>'
            })
            languageCircleList.innerHTML = circleInner
            languageSplitList.innerHTML = inner
	    } else {
	        showNoDataImg(languageCircleList)
		    showNoDataImg(languageSplitList)
	    }
	}

    const ethnicityEle= document.getElementById('ethnicityChart')
    function initEthnicity() {
	    if(activeFansInfo.race && activeFansInfo.race.length > 0) {
            const ethnicityChart = echarts.init(ethnicityEle)
            let option = {
                color: ['#3AA0FF', '#62B2FE', '#89C5FF', '#B1D9FF', '#D8ECFF','#D3E9FF'],
                tooltip: {
                    trigger: 'item',
                    formatter(params) {
                    	return params.name + ': ' + numFormat(+params.value) + '%'
					}
                },
                series: [
                    {
                        name: 'age',
                        type: 'pie',
	                    <#if isMobile == false>
                        radius: ['50%', '70%'],
	                    <#else>
                        radius: ['30%', '50%'],
	                    </#if>
                        label: {
                            fontSize: 14,
                            color: '#545454'
                        },
                        data: activeFansInfo.race.map(item => {
                            return {
                                value: item.raceRate,
                                name: item.raceName
                            }
                        }),
                        itemStyle: {
                            normal: {
                                opacity: 0.7,
                                borderWidth: 1,
                                borderColor: '#FFF'
                            }
                        }
                    }
                ]
            }
            ethnicityChart.setOption(option)
	    } else {
	        showNoDataImg(ethnicityEle)
	    }
	}
    const activeTimeHourEle = document.getElementById('activeTimeHourChart')
    function initActiveHour() {
	    if(activeFansInfo.activeHour.length > 0) {
            const chart = echarts.init(activeTimeHourEle)
            const option = {
                color: ['#1890FF'],
                xAxis: {
                    type: 'category',
                    data: activeFansInfo.activeHour.map(((item,i) => i )),
                    axisLabel: {
                        interval: 1,
                        textStyle: {
                            color: '#8C8C8C'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#EEE'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter (params) {
                        return params[0].name + ': ' + numFormat(+params[0].value) + '%'
                    }
                },
                grid: {
                    top: 20,
                    left: 40,
                    right: 18,
                    bottom: 20,
                    borderWidth: 0
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter(val) {
                            return numFormat(val) + '%'
                        },
                        textStyle: {
                            color: '#8C8C8C'
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#EEE'
                        }
                    }
                },
                series: [{
                    data: activeFansInfo.activeHour,
                    type: 'bar',
                    lineStyle: {
                        width: 1
                    },
                    areaStyle: {
                        normal: {
                            opacity: 0.3
                        }
                    },
                    barWidth: 6,
                    itemStyle: {
                        barBorderRadius: [4, 4, 0, 0],
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#1890FF'
                            }, {
                                offset: 1,
                                color: '#FFF'
                            }]),
                            lineStyle: {
                                color: '#1890FF' // 改变折线颜色
                            }
                        }
                    }
                }]
            }
            chart.setOption(option)
	    } else {
	        showNoDataImg(activeTimeHourEle)
	    }
    }

    const activeTimeDayEle = document.getElementById('activeTimeDayChart')
    function initActiveDay() {
	    if(activeFansInfo.activeDay.length > 0) {
            const chart = echarts.init(activeTimeDayEle)
            const option = {
                color: ['#1890FF'],
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisLabel: {
                        textStyle: {
                            color: '#8C8C8C'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#EEE'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
					formatter (params) {
						return params[0].name + ': ' + numFormat(+params[0].value) + '%'
					}
                },
                grid: {
                    top: 20,
                    left: 45,
                    right: 18,
                    bottom: 20,
                    borderWidth: 0
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter(val) {
                            return numFormat(val) + '%'
                        },
                        textStyle: {
                            color: '#8C8C8C'
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#EEE'
                        }
                    }
                },
                series: [{
                    data: activeFansInfo.activeDay,
                    type: 'bar',
                    lineStyle: {
                        width: 1
                    },
                    areaStyle: {
                        normal: {
                            opacity: 0.3
                        }
                    },
                    barWidth: 20,
                    itemStyle: {
                        barBorderRadius: [4, 4, 0, 0],
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#1890FF'
                            }, {
                                offset: 1,
                                color: '#FFF'
                            }]),
                            lineStyle: {
                                color: '#1890FF' // 改变折线颜色
                            }
                        }
                    }
                }]
            }
            chart.setOption(option)
	    } else {
	        showNoDataImg(activeTimeDayEle)
	    }
    }
    function getAudienceInterest() {
	    _axios.get('/ins/blogger/fansInterest/${blogger.uid?c}').then(res => {
	        if(res.Code === 200) {
                initInterestDis(res.Data)
	        }
	    })
    }
	function initInterestDis(data) {
	    const chartWrapInner = document.getElementById('interestDisWrapInner')
	    const chartWrap = document.getElementById('interestDisChart')
		const list = document.getElementById('interestDisList')
		if(data.length > 0) {
            let interestDisChart = echarts.getInstanceByDom(chartWrap)
			if(!interestDisChart) {
                interestDisChart = echarts.init(chartWrap)
			}
            const option = {
                color: ['#1890FF'],
                xAxis: {
                    type: 'category',
                    data: data.map(item => item.categoryName),
                    axisLabel: {
                        textStyle: {
                            color: '#8C8C8C'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#EEE'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                tooltip: {
                    trigger: 'axis',
	                axisPointer: {
                      type: 'shadow'
	                },
                    formatter (params) {
                    	return params[0].name + ': ' + numFormat(+params[0].value) + '%'
					}
                },
                grid: {
                    top: 20,
                    left: 45,
                    right: 20,
                    bottom: 20,
                    borderWidth: 0
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter(val) {
                            return numFormat(val) + '%'
                        },
                        textStyle: {
                            color: '#8C8C8C'
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#EEE'
                        }
                    }
                },
                series: [{
                    data: data.map(item => item.categoryRate),
                    type: 'bar',
                    lineStyle: {
                        width: 1
                    },
                    areaStyle: {
                        normal: {
                            opacity: 0.3
                        }
                    },
                    barWidth: 30,
                    itemStyle: {
                        barBorderRadius: [4, 4, 0, 0],
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#1890FF'
                            }, {
                                offset: 1,
                                color: '#FFF'
                            }]),
                            lineStyle: {
                                color: '#1890FF' // 改变折线颜色
                            }
                        }
                    }
                }]
            }
            interestDisChart.setOption(option)
			let str = ''
			data.forEach(item => {
			    str += '<div class="region-item">' +
				    '<div class="label">' +
				    '<div class="left">' + item.categoryName + '</div>' +
				    '<div class="right">' + numFormat(+item.categoryRate) + '%</div>' +
				    '</div>' +
                    '<div class="gd-progress">' +
                    '<div class="gd-progress-bar" style="width:' + item.categoryRate + '%;"></div>' +
                    '</div>' +
				    '</div>'
			})
            list.innerHTML = str
		} else {
		    showNoDataImg(chartWrap)
			showNoDataImg(list)
		}
        chartWrapInner.hideLoading()
	}
	function getLikeBrand() {
	    const brandList = document.getElementById('likeBrandList')
        brandList.showLoading()
	    _axios.get('/ins/blogger/fansLikeBrand/${blogger.uid?c}/' + likeBrandPageSize).then(res => {
	        if(res.Code === 200) {
                initLikeBrand(res.Data)
	        }
            brandList.hideLoading()
	    })
	}
	function initLikeBrand(data) {
        const likeBrandList = document.getElementById('likeBrandList')
		const viewMoreEle = likeBrandList.querySelector('.wrap-footer')
        if(data.length > 0) {
            if(data.length < 10) {
                viewMoreEle && viewMoreEle.hide()
            } else {
                viewMoreEle && viewMoreEle.show()
            }
            let str = ''
	        const brandListWrap = likeBrandList.querySelector('.brand-list')
            if(likeBrandPageSize > 1) {
                str = brandListWrap.innerHTML
                viewMoreEle && viewMoreEle.hide()
            }
            data.forEach(item => {
                str += '<div class="brand-item">' +
                    '<img class="brand-avatar" src="' + item.picUrl + '" alt="' + item.username + '">' +
                    '<div class="brand-info">' +
                    '<div class="title">' + item.username + '</div>'
                if(item.categoryName) {
                    str += '<div class="sub-title">' + item.categoryName + '</div>'
                } else {
                    str += '<div class="sub-title is-white">&nbsp;</div>'
                }
                str += '</div>' +
                    '</div>'
            })
            likeBrandList.removeAttribute('style')
            brandListWrap.innerHTML = str
            likeBrandPageSize++
        } else {
            if(likeBrandPageSize === 1) {
                likeBrandList.style.minHeight = '160px'
                showNoDataImg(likeBrandList)
            }
            viewMoreEle && viewMoreEle.hide()
        }
	}
	function changeInterestDis(ele, type) {
		if(!ele.classList.contains('is-active')) {
            const chartWrapInner = document.getElementById('interestDisWrapInner')
		    ele.parentElement.querySelector('.is-active').classList.remove('is-active')
			ele.classList.add('is-active')
            chartWrapInner.showLoading()
            if(type === 0) {
                getAudienceInterest()
            } else {
                _axios.get('/ins/blogger/fansInterestBrand/${blogger.uid?c}').then(res => {
                    if(res.Code === 200) {
                        initInterestDis(res.Data)
                    }
                })
            }
		}
	}
</script>